.main_content {
  width: 100%;
  height: 100%;
  padding: 20rpx 50rpx 0;
}

.content {
  width: 100%;
  height: 100%;
}

.tabs {
  width: 100%;
  height: 75rpx;
}

.tabs_list {
  width: 100%;
  height: 100%;
  display: flex;
  overflow-x: auto;
}

.tabs_item {
  width: 212rpx;
  height: 100%;
  padding: 0 28rpx;
  background: #5fc2cc;
  border: 2rpx solid #fff;
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  &:not(:last-child) {
    margin-right: 80rpx;
  }

  &.active {
    background: #fcc911;

    text {
      color: #077EC9;
    }
  }

  text {
    width: 100%;
    font-size: 28rpx;
    color: #FFFFFF;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}


.box {
  width: 100%;
  height: calc(100% - 178rpx);
  padding-top: 40rpx;
  display: flex;
  justify-content: center;
}

.list {
  width: 1734rpx;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 504rpx;
  height: 92rpx;
  margin-right: 104rpx;
  margin-bottom: 20rpx;
  background: #ffffff;
  border-radius: 20rpx;
  position: relative;
  display: flex;
  overflow: hidden;

  &:nth-child(3n) {
    margin-right: 0;
  }
}

.item_left {
  width: 182rpx;
  height: 100%;
  padding: 15rpx 0 15rpx 15rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.item_word {
  font-size: 28rpx;
  color: #000;
}

.item_phonetic {
  width: auto;

  text {
    font-size: 28rpx;
    color: #666;
  }
}

.item_right {
  flex: 1;
  height: 100%;
  background: #f5f5f5;
  padding-left: 10rpx;
  padding-right: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item_interpretation {
  flex: 1;
  font-size: 28rpx;
  color: #000;
}

.item_icon {
  width: auto;
  display: flex;
}

.icon {
  width: 28rpx;
  height: 28rpx;

  image {
    width: 100%;
    height: 100%;
  }

  &+.icon {
    margin-left: 20rpx;
  }
}

.btn {
  width: 100%;
  margin-top: 40rpx;
  display: flex;
  justify-content: center;
}

.btn_content {
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  text {
    font-size: 30rpx;
  }

  &:nth-child(1) {
    width: 194rpx;
    background: url(https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/word/btn_bg1.png) center center/cover no-repeat;

    text {
      color: #FFFFFF;
    }
  }

  &:nth-child(2) {
    width: 216rpx;
    background: url(https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/word/btn_bg2.png) center center/cover no-repeat;

    text {
      color: #1089FE;
    }
  }

  &+.btn_content {
    margin-left: 538rpx;
  }

}

.tips {
  width: 100%;
  height: 100%;
  background: url(https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/word/popup_bg1.png) center center/cover no-repeat;
  padding: 120rpx 0 60rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.tips_content {
  width: auto;
}

.tips_text {
  display: flex;
  align-items: center;

  &:not(:last-child) {
    margin-bottom: 60rpx;
  }

  view {
    flex: 1;
    font-size: 34rpx;
    color: #020202;
  }

  image {
    width: 42rpx;
    height: 42rpx;
  }
}

.tips_text1 {
  width: 314rpx;
}

.tips_text2 {
  width: 348rpx;

  image {
    margin-right: 34rpx;
  }
}

.tips_btn {
  width: 160rpx;
  height: 64rpx;
  background: rgba($color: #4ca6ec, $alpha: 0.38);
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  text {
    font-size: 36rpx;
    color: #000000;
  }
}

.select {
  width: 100%;
  height: 100%;
  padding: 0 60rpx;
  background: blue;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.select_content {
  width: 372rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.select_nav {
  width: 100%;
  height: 530rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  text {
    width: 56rpx;
    font-size: 56rpx;
    color: #fff;
    line-height: 84rpx;
  }
}

.select_text {
  margin-top: 40rpx;
  font-size: 36rpx;
  color: #fff;
}